<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			width: 450px;
			display: flex;
			flex-wrap: wrap;
			background: skyblue;
			justify-content: space-between;
			margin: 0 auto;
		}
		li{
			list-style: none;
			width: 100px;
			height: 100px;
			margin-bottom: 10px;
			background: pink;
			box-sizing: border-box;
			text-align: center;
			line-height: 100px;
		}
	</style>
</head>
<body>
<div>
	<ul>
		<li>17</li>
		<li>18</li>
		<li>19</li>
		<li>20</li>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</div>

<script type="text/javascript">
	let li = document.querySelectorAll('li')
</script>
</body>
</html>